<template>
  <div>
    <div class="share-list-banner">
      <draggable v-model="selectList">
        <div v-for="item in selectList" :key="item.objectId" class="share-item">
          <span class="share-item-text">{{ item.title }}</span>
          <Button type="text" icon="md-close"></Button>
        </div>
      </draggable>
    </div>
    <div>
      <Button type="text">最近10条</Button>
      <Button type="text">最近7天</Button>
      <Table :columns="columns" :data="tableData">
        <template slot="action" slot-scope="{ row }">
          <Button type="text" @click="selectShare(row)">选择</Button>
        </template>
      </Table>
      <Page simple :total="total"></Page>
    </div>
  </div>
</template>
<script>
import { pageQuery } from "@/api/post";
import pageMixin from "@/mixins/pagation";

export default {
  mixins: [pageMixin],
  props: {
    value: {
      required: true,
      type: Array
    }
  },
  data() {
    const columns = [
      {
        title: "标题",
        key: "title"
      },
      {
        title: "操作",
        slot: "action"
      }
    ];
    return {
      columns,
      tableData: [],
      selectList: []
    };
  },
  methods: {
    selectShare(row) {
      const index = this.selectList.findIndex(
        item => item.objectId === row.objectId
      );
      if (index === -1) {
        this.selectList.push(row);
      }
    },
    queryList(pageNum) {
      this.loading = true;
      pageNum && (this.pageNum = pageNum);
      pageQuery(this.requestParams, this.pageNum, this.pageSize)
        .then(({ list, total }) => {
          this.loading = false;
          this.tableData = list;
          this.total = total;
          return total;
        })
        .catch(err => {
          this.loading = false;
          this.$Message.error("请求失败");
        });
    }
  },
  watch: {
    selectList(value) {
      this.$emit("input", JSON.parse(JSON.stringify(value)));
    }
  },
  mounted() {
    this.selectList = this.value;
    this.queryList(1);
  }
};
</script>
<style lang="less" scoped>
.share-list-banner {
}
.share-item {
  display: inline-block;
}
</style>